<template>
  <el-main>
    <el-form ref="form" :model="form" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item>
            <template #label>
              <span>
                公告名称
                <span style="color: red;">*</span>
              </span>
            </template>
            <el-input v-model="form.tital"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="checked">置顶</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item>
            <template #label>
              <span>
                公告内容
                <span style="color: red;">*</span>
              </span>
            </template>
            <el-input v-model="form.content"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item>
            <template #label>
              <span>
                发布状态
                <span style="color: red;">*</span>
              </span>
            </template>
            <el-radio-group v-model="form.status">
              <el-radio :label="1">立即发布</el-radio>
              <el-radio :label="0">存为草稿</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <!-- 上传图片框1 -->
        <el-col :span="24">
          <el-form-item label="公告封面">
            <div style="display: flex; align-items: center;">
              <div>
                <el-upload
                  action="api/employee/upload"
                  :on-success="handleAvatarSuccess"
                  :show-file-list="false"
                  v-model="form.imgSrc"
                  :limit="1"
                  list-type="picture"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <div style="margin-top: 10px;">
                    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                  </div>
                </el-upload>
              </div>
              <div>
                <p style="margin-left: 20px; margin-top: 10px;">建议上传200*200尺寸大小，图标格式为jpg、jpeg、png类型</p>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div class="header-buttons">
      <!-- 其他内容 -->
      <el-button type="primary" @click="update">编辑</el-button>
      <el-button type="primary" @click="remove">取消</el-button>
    </div>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      form: {
        tital: "",
        status: "",
        content: "",
        isTop: "",// 默认为false，表示未置顶
        userId: "",
        imgSrc: "",
      },

    };
  },
  methods: {
    update() {
      // 验证必填项
      if (
        !this.form.content
      ) {
        this.$message.error("请填写所有必填项！");
        return;
      }
     
      //添加图片
      this.form.imgSrc = this.imageUrl;

      console.log("公告: ", this.form);
      let Announcement = this.form;
      this.$axios.post("api/Announcement/updateAnno", Announcement).then(res => {
        if (res.data.code == 200) {
          this.$message.success("提交成功!");
       this.$router.push({ path: "/announcement" });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    handleAvatarSuccess(res, file) {
      console.log(res.data);
      this.imageUrl = res.data;
    },
    queryById() {
      this.$axios.get("api/Announcement/queryById/" + this.id).then((res) => {
        if (res.data.code == 200) {
          const originalForm = res.data.data;
          this.imageUrl = originalForm.imgSrc;
          this.form = originalForm
         
        
        }
      });
    },
    remove(){
      this.$router.push({ path: "/announcement" });
    }
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.queryById()
    } else {
      console.error('The id is undefined.')
    }
  },
 
  computed: {
  checked: {
    get() {
      return this.form.isTop; // 当checked被访问时，返回isTop的值
    },
    set(value) {
      this.form.isTop = value; // 当checked被设置时，更新isTop的值
      if (value === true) {
        this.form.totop = 1; // 当checked被设置为真（已选中）时，同时设置topStatus为1
      } else {
        this.form.totop = 0; // 当checked被设置为假（未选中）时，同时设置topStatus为0
      }
    }
  }
}
};
</script>

<style>
.avatar {
  width: 120px;
  /* 调整为你需要的宽度 */
  height: 120px;
  /* 调整为你需要的高度 */
  object-fit: cover;
  /* 这条语句会使图片以 "cover" 模式显示，保持图片的本身比例长宽比，裁剪超出部分 */
}
</style>